<template>
    <div class="goodsDetail">
        <goods-detail-bar v-show="isTop" class="topBar"></goods-detail-bar>
        <goods-summary :goods-info="goodsInfo" :goods-picture-list="goodsPictureList"></goods-summary>
        <goods-standard :goods-info="goodsInfo"></goods-standard>
<!--        <goods-comment :goods-info="goodsInfo"></goods-comment>-->
        <goods-shop :shopId="shopId" :shop-info="shopInfo"></goods-shop>
        <detail-rich-text :detail-html="detailHtml"></detail-rich-text>
        <goods-action-tab :goods-info="goodsInfo" @change="handleAttrPop"></goods-action-tab>
        <goods-sku ref="goodsSku" :goods-info="goodsInfo" :shop-info="shopInfo" @orderConfirm="confirmOrder"></goods-sku>
    </div>
</template>

<script>
    import GoodsSummary from "./goodsSummary";
    import GoodsDetailBar from "../../components/GoodsDetailBar";
    import GoodsStandard from "./GoodsStandard";
    import GoodsShop from "./GoodsShop";
    import DetailRichText from "./DetailRichText";
    import GoodsActionTab from "../../components/GoodsActionTab";
    import GoodsSku from "../../components/GoodsSku";
    export default {
        name: 'goodsDetail',
        components: {
            GoodsSku,
            GoodsActionTab,
            DetailRichText, GoodsShop, GoodsStandard, GoodsDetailBar, GoodsSummary},

        data() {
            return {
                goodsId: this.$route.query.goodsId,
                goodsInfo: {},
                goodsAdvice: {},
                goodsComment: {},
                goodsPictureList: [],
                statementVo: {},
                isTop: true,
                detailHtml: "",
                goodsAttrList: [],
                shopId: "",
                shopInfo: {}
            }
        },
        beforeRouteEnter(to, from, next) {
            if(!to.query.goodsId) {
                //未携带goodsId
                next({ path: "/index" })
            }else {
                next()
            }
        },
        created() {
            this.initData();
        },
        mounted() {
            this.wxShare()
        },
        computed: {
            myInviteNumber() {
                let myInviteNumber = this.$store.state.myInviteNumber;
                return myInviteNumber ? myInviteNumber : 888888   //自己的邀请码，分享给别人
            }
        },
        watch: {},
        methods: {
            wxShare() {
                let that = this;
                let currentUrl = decodeURIComponent(location.href.split('#')[0]);
                let redirectUrl = `${this.$route.path}?goodsId=${this.goodsId}&inviteNum=${this.myInviteNumber}`;
                redirectUrl = `http://pkmbtest.pkmb168.cn/web-wx-share.html?redirctUrl=${redirectUrl}`;
                this.$api.getJSApiTicket({
                    url: currentUrl
                }).then( res => {
                    let result = this.$resData(res);
                    if(result) {
                        window.wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: that.$global.appId, // 必填，公众号的唯一标识
                            timestamp: result.timestamp, // 必填，生成签名的时间戳
                            nonceStr: result.nonceStr, // 必填，生成签名的随机串
                            signature: result.signature,// 必填，签名
                            jsApiList: ['updateAppMessageShareData','updateTimelineShareData',] // 必填，需要使用的JS接口列表
                        });
                        window.wx.ready(function(){
                            //redirectUrl = encodeURIComponent(redirectUrl);
                            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                            window.wx.updateAppMessageShareData({
                                title: that.goodsInfo.goodsName, // 分享标题
                                desc: that.goodsInfo.goodsName, // 分享描述
                                link: redirectUrl,
                                imgUrl: that.goodsInfo.goodsThumb, // 分享图标
                            });
                            window.wx.updateTimelineShareData({
                                title: that.goodsInfo.goodsName, // 分享标题
                                link: redirectUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: that.goodsInfo.goodsThumb, // 分享图标
                            })
                        });
                    }
                });
            },
            initData() {
                this.getGoodsInfo()
            },
            getGoodsInfo() {
                let params = {
                    goodsInfoId: this.goodsId,
                    inviteNumber: this.$store.state.inviteNum ? this.$store.state.inviteNum : "",
                    taskReceiveId: this.$store.state.receiveId ? this.$store.state.receiveId : ""
                };
                this.$api.getGoodsInfo(params).then(res => {
                    let result = this.$resData(res);
                    if(!result) {
                        return false
                    }
                    if(result.goodsInfoWithBLOBs) {
                        this.goodsInfo = result.goodsInfoWithBLOBs;
                        this.goodsAttrList = result.goodsInfoWithBLOBs.goodsAttrList;
                        this.detailHtml = result.goodsInfoWithBLOBs.goodsContent;
                        this.shopId = result.goodsInfoWithBLOBs.shopId;
                        this.$store.commit("setGoodsInfo", this.goodsInfo);
                        this.getShopInfo();
                    }
                    if(result.goodsAdviceVoResultPage) {
                        this.goodsAdvice = result.goodsAdviceVoResultPage
                    }
                    if(result.goodsCommentVoResultPage) {
                        this.goodsComment = result.goodsCommentVoResultPage
                    }
                    if(result.goodsPictureVoList) {
                        this.goodsPictureList = result.goodsPictureVoList
                    }
                    if(result.statementVo) {
                        this.statement = result.statement
                    }
                })
            },
            //获取店铺详情
            getShopInfo(){
                this.$api.getShopInfo(this.shopId).then(res => {
                    let result = this.$resData(res);
                    if(result) {
                        this.shopInfo = result;
                        this.$store.commit("setShopInfo", this.shopInfo)
                    }
                })
            },
            toLogin() {
                this.$router.push({path: "/login"})
            },
            handleAttrPop() {
                this.$refs.goodsSku.handleAttrPop()
            },
            confirmOrder(attrData) {
                if(typeof attrData === "object") {
                    //购物车，一个订单多个商品
                    let tempArr = [];
                    for(let key in attrData.selectedSkuComb) {
                        if(!(key === "id" || key === "price" || key === "stock_num" || key === "picture" )) {
                            tempArr.push(attrData.selectedSkuComb[key])
                        }
                    }
                    let attrStr = tempArr.join("、");
                    let orderInfo = [
                        {
                            goodsId: attrData.goodsId,
                            goodsName: this.goodsInfo.goodsName,
                            shopId: this.shopId,
                            shopName: this.shopInfo.shopName,
                            attrNum: attrData.selectedNum,
                            attrId: attrData.selectedSkuComb.id,
                            picture: attrData.selectedSkuComb.picture,
                            price: attrData.selectedSkuComb.price/100,
                            attrStr: attrStr
                        }
                    ];
                    this.$store.commit("setOrderInfo", orderInfo);
                    this.$router.push({
                        path: "/goodsOrder/orderConfirm" ,
                        query: {
                            goodsId: attrData.goodsId,
                            shopId: this.shopId
                        }
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .goodsDetail {
        .topBar {
            position: fixed;
            z-index: 9;
        }
        padding-bottom: 50px;
    }
</style>
